import React, { useState, useEffect } from 'react';
import { Layout, Menu, Card } from 'antd';
import { 
  RobotOutlined, 
  ToolOutlined, 
  FileTextOutlined, 
  SettingOutlined 
} from '@ant-design/icons';
import './styles/config-layout.css';

const { Sider, Content } = Layout;

export interface MenuConfig {
  key: string;
  label: string;
  icon?: React.ReactNode;
  description?: string;
}

const defaultMenuItems: MenuConfig[] = [
  {
    key: 'llm-config',
    label: 'LLM 配置',
    icon: <RobotOutlined />,
    description: 'AI 模型和 API 配置'
  },
  {
    key: 'mcp-config', 
    label: 'MCP 工具',
    icon: <ToolOutlined />,
    description: 'MCP 工具连接配置'
  },
  {
    key: 'import-export',
    label: '配置管理',
    icon: <FileTextOutlined />,
    description: '导入导出配置'
  },
  {
    key: 'advanced',
    label: '高级设置',
    icon: <SettingOutlined />,
    description: '高级配置选项'
  }
];

interface ConfigLayoutProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
  children: React.ReactNode;
  menuItems?: MenuConfig[];
}

export const ConfigLayout: React.FC<ConfigLayoutProps> = ({
  activeTab,
  onTabChange,
  children,
  menuItems = defaultMenuItems
}) => {
  const [collapsed, setCollapsed] = useState(false);

  // 持久化菜单折叠状态
  useEffect(() => {
    chrome.storage.local.get(['siderCollapsed'], (result) => {
      if (result.siderCollapsed !== undefined) {
        setCollapsed(result.siderCollapsed);
      }
    });
  }, []);

  const handleCollapse = (collapsed: boolean) => {
    setCollapsed(collapsed);
    chrome.storage.local.set({ siderCollapsed: collapsed });
  };

  const handleMenuClick = ({ key }: { key: string }) => {
    onTabChange(key);
    // 持久化当前选中的标签页
    chrome.storage.local.set({ activeConfigTab: key });
  };

  return (
    <Layout 
      className="config-layout"
      style={{
        minHeight: '100vh',
        background: '#f5f5f5',
        fontFamily: 'var(--eko-font-family-chinese)',
      }}
    >
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={handleCollapse}
        width={240}
        className="config-sider"
        style={{
          background: '#fff',
          boxShadow: '2px 0 8px rgba(0, 0, 0, 0.08)',
          overflow: 'auto',
          height: '100vh',
          position: 'fixed',
          left: 0,
          top: 0,
          bottom: 0,
        }}
        breakpoint="lg"
        collapsedWidth={80}
      >
        <div 
          className="config-logo"
          style={{
            height: '64px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: collapsed ? 'center' : 'flex-start',
            padding: collapsed ? '0' : '0 24px',
            borderBottom: '1px solid #f0f0f0',
            marginBottom: '8px',
            fontSize: '18px',
            fontWeight: 600,
            color: '#1890ff',
            fontFamily: 'var(--eko-font-family-chinese)',
          }}
        >
          {collapsed ? '配' : '扩展配置'}
        </div>
        
        <Menu
          mode="inline"
          selectedKeys={[activeTab]}
          onClick={handleMenuClick}
          style={{
            border: 'none',
            fontFamily: 'var(--eko-font-family-chinese)',
            fontSize: 'var(--eko-font-size-sm)',
          }}
          items={menuItems.map(item => ({
            key: item.key,
            icon: item.icon,
            label: (
              <div style={{ fontFamily: 'var(--eko-font-family-chinese)', fontWeight: 500 }}>
                {item.label}
              </div>
            ),
          }))}
        />
      </Sider>
      
      <Layout 
        style={{ 
          marginLeft: collapsed ? 80 : 240,
          transition: 'margin-left 0.2s',
        }}
      >
        <Content 
          className="config-content"
          style={{
            padding: '24px',
            background: '#f5f5f5',
            overflowY: 'auto',
            minHeight: '100vh',
          }}
        >
          <Card 
            className="config-card"
            style={{
              background: '#fff',
              borderRadius: '8px',
              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
              border: '1px solid #e8e8e8',
              minHeight: 'calc(100vh - 48px)',
            }}
            bodyStyle={{
              padding: '24px',
              fontFamily: 'var(--eko-font-family-chinese)',
            }}
          >
            {children}
          </Card>
        </Content>
      </Layout>
    </Layout>
  );
};